<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实验四</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            border: 1px solid #000000;
        }
    </style>

</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "blue";
    ctx.font = "50px 隶书"
    ctx.fillText("聊城大学", 300, 65);
    ctx.beginPath();
    ctx.strokeStyle = "blue";
    ctx.moveTo(10, 120);
    ctx.lineTo(790, 120);
    ctx.stroke();
    ctx.fill();
    ctx.fillStyle = "blue";
    ctx.font = "20px Arial "
    ctx.textBaseline = "top";
    ctx.fillText("富强", 10, 120);
    ctx.textBaseline = "bottom";
    ctx.fillText("民主", 60, 120);
    ctx.textBaseline = "middle";
    ctx.fillText("文明", 150, 120);
    ctx.textBaseline = "alphabetic";
    ctx.fillText("核心", 270, 120);
    ctx.textBaseline = "hanging";
    ctx.fillText("自由", 350, 120);
    ctx.textBaseline = "middle";
    ctx.fillText("平等", 470, 120);
    ctx.textBaseline = "alphabetic";
    ctx.fillText("公正", 600, 120);
    ctx.textBaseline = "hanging";
    ctx.fillText("法治", 700, 120);
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.moveTo(10, 180);
    ctx.lineTo(790, 180);
    var color = ctx.createLinearGradient(10, 180, 790, 180);
    color.addColorStop(0, "red");
    color.addColorStop(0.4, "green");
    color.addColorStop(0.7, "yellow");
    color.addColorStop(1, "blue");
    ctx.strokeStyle = color;
    ctx.stroke();
    ctx.fill();
    ctx.closePath();
    var width = 240;
    var height = 170;
    var img = new Image();
    img.src = "img/liaochengdaxue.jpg";
    ctx.drawImage(img, 160, 190, width, height);
    ctx.drawImage(img, 300, 280, width, height);
    ctx.drawImage(img, 430, 370, width, height);
    ctx.drawImage(img, 570, 460, width, height);
    ctx.drawImage(img, 710, 540, width, height);

    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 2;
    ctx.arc(30, 480, 15, 0, Math.PI * 2, true);
    ctx.fillStyle = "#FE2E2E";
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 2;
    ctx.arc(100, 480, 15, 0, Math.PI * 2, true);
    ctx.fillStyle = "#DF0101";
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 2;
    ctx.arc(160, 480, 15, 0, Math.PI * 2, true);
    ctx.fillStyle = "#B40404";
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 2;
    ctx.arc(210, 480, 15, 0, Math.PI * 2, true);
    ctx.fillStyle = "#610B0B";
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 2;
    ctx.arc(260, 480, 15, 0, Math.PI * 2, true);
    ctx.fillStyle = "#393B0B";
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 2;
    ctx.moveTo(45, 480);
    ctx.lineTo(85, 480);
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 2;
    ctx.moveTo(115, 480);
    ctx.lineTo(145, 480);
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 2;
    ctx.moveTo(175, 480);
    ctx.lineTo(195, 480);
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 2;
    ctx.moveTo(225, 480);
    ctx.lineTo(245, 480);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
    ctx.font = "30px Arial"
    var color1 = ctx.createLinearGradient(15, 510, 220, 550);
    color1.addColorStop(0, "#F7BE81");
    color1.addColorStop(0.3, "#FF0000");
    color1.addColorStop(0.7, "#2EFE2E");
    color1.addColorStop(1, "#FE2EC8");
    ctx.strokeStyle = color1;
    ctx.strokeText("李成帅", 15, 510);
    ctx.strokeText("2017205743", 15, 560);
</script>
</body>
</html>